<template>
  <div class="feedback-pagination">
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      v-loading="tableLoading"
      border
    >
      <el-table-column prop="id" label="id" width="190" />
      <el-table-column prop="phoneNumber" label="手机号码" width="180" />
      <el-table-column prop="content" label="反馈内容" min-width="320" />
      <el-table-column prop="createTime" label="创建时间" width="240" />
    </el-table>
    <div class="pagination-field">
      <el-pagination
        v-model:current-page="formData.pageIndex"
        v-model:page-size="formData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getFeedbackPagination } from "@/api/systemSetting.api";

const formData = reactive({
  pageIndex: 1,
  pageSize: 10,
  total: 0,
});

const tableLoading = ref(false);
const tableData = ref([]);

const toRollback = () => {
  console.log("开始回滚~~~");
};

const handleSizeChange = (value: number) => {
  console.log("handleSizeChange...", value);
  formData.pageSize = value;
  getDataList();
};

const handleCurrentChange = (value: number) => {
  console.log("handleCurrentChange...", value);
  formData.pageIndex = value;
  getDataList();
};

const getDataList = () => {
  tableLoading.value = true;
  getFeedbackPagination({
    pageSize: formData.pageSize,
    pageIndex: formData.pageIndex,
  })
    .then(function (res: any) {
      tableLoading.value = false;
      console.log(res);
      tableData.value = res.list || [];
      formData.total = Number(res.total);
      formData.pageIndex = Number(res.pageIndex);
      formData.pageSize = Number(res.pageSize);
    })
    .catch((error) => {
      console.log(error);
      tableLoading.value = false;
    });
};

onMounted(() => {
  getDataList();
});
</script>
<style lang="scss" scoped>
.pagination-field {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}

.feedback-pagination {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}
</style>
